<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React-ProseMirror Demo</title>
    <link rel=stylesheet href="./prosemirror.css" async defer>
    <style>
.ProseMirror {
  border: thin solid #ccc;
  border-radius: 0.25rem;
  padding: 1rem;
  outline: none;
  min-height: 700px;
}

main {
  margin: auto;
  width: 80%;
  max-width: 700px;
}

.menu {
  display: flex;
  margin-bottom: 5px;
}

.button {
  cursor: pointer;
  width: 36px;
  height: 36px;
  margin-right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  border: thin solid #ccc;
  border-radius: 0.25rem;
  color: black;
  background-color: white;

  &[aria-pressed="true"] {
    background-color: #ddd;
    color: blue;
  }
}

.button.bold {
  font-weight: 700;
}

.button.italic {
  font-style: italic;
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
    </style>
    <!-- y-prosemirror specific styles -->
    <style>
placeholder {
  display: inline;
  border: 1px solid #ccc;
  color: #ccc;
}
placeholder:after {
  content: "☁";
  font-size: 200%;
  line-height: 0.1;
  font-weight: bold;
}
.ProseMirror img { max-width: 100px }

/* this is a rough fix for the first cursor position when the first paragraph is empty */
.ProseMirror > .ProseMirror-yjs-cursor:first-child {
  margin-top: 16px;
}
.ProseMirror p:first-child, .ProseMirror h1:first-child, .ProseMirror h2:first-child, .ProseMirror h3:first-child, .ProseMirror h4:first-child, .ProseMirror h5:first-child, .ProseMirror h6:first-child {
  margin-top: 16px
}
/* This gives the remote user caret. The colors are automatically overwritten*/
.ProseMirror-yjs-cursor {
  position: relative;
  margin-left: -1px;
  margin-right: -1px;
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-color: orange;
  word-break: normal;
  pointer-events: none;
}
/* This renders the username above the caret */
.ProseMirror-yjs-cursor > div {
  position: absolute;
  top: -1.05em;
  left: -1px;
  font-size: 13px;
  background-color: rgb(250, 129, 0);
  font-family: serif;
  font-style: normal;
  font-weight: normal;
  line-height: normal;
  user-select: none;
  color: white;
  padding-left: 2px;
  padding-right: 2px;
  white-space: nowrap;
}
#y-functions {
  position: absolute;
  top: 20px;
  right: 20px;
}
#y-functions > * {
  display: inline-block;
}
    </style>
    <style>
.ProseMirror {
  position: relative;
}

.ProseMirror {
  word-wrap: break-word;
  white-space: pre-wrap;
  white-space: break-spaces;
  -webkit-font-variant-ligatures: none;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */
}

.ProseMirror pre {
  white-space: pre-wrap;
}

.ProseMirror li {
  position: relative;
}

.ProseMirror-hideselection *::selection { background: transparent; }
.ProseMirror-hideselection *::-moz-selection { background: transparent; }
.ProseMirror-hideselection { caret-color: transparent; }

/* See https://github.com/ProseMirror/prosemirror/issues/1421#issuecomment-1759320191 */
.ProseMirror [draggable][contenteditable=false] { user-select: text }

.ProseMirror-selectednode {
  outline: 2px solid #8cf;
}

/* Make sure li selections wrap around markers */

li.ProseMirror-selectednode {
  outline: none;
}

li.ProseMirror-selectednode:after {
  content: "";
  position: absolute;
  left: -32px;
  right: -2px; top: -2px; bottom: -2px;
  border: 2px solid #8cf;
  pointer-events: none;
}

/* Protect against generic img rules */

img.ProseMirror-separator {
  display: inline !important;
  border: none !important;
  margin: 0 !important;
}
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="dist/index.js"></script>
  </body>
</html>
